<template>
  <div>
    <div class="header">
      <div>
        <label>联系人姓名：</label>
        <el-input style="width: 280px" size="small" placeholder="请输入联系人姓名" v-model.trim="name"> </el-input>
        <el-button size="small" type="primary" class="commonBtn1" @click="searchBtn">搜索</el-button>
      </div>
    </div>

    <el-table
      :data="personnelList"
      border
      class="inventory_table"
      ref="personTable"
      :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
      :row-class-name="tabRowClassName"
      @selection-change="handleSelectionChange"
      @select="handleSelect"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column width="60" align="center" type="index" :index="addIndex" label="序号"></el-table-column>
      <el-table-column align="center" label="姓名" prop="userName"></el-table-column>
      <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
      <el-table-column align="center" label="角色" prop="role"></el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" width="180"></el-table-column>
    </el-table>
    <el-pagination
      :page-size="currenteSize"
      :page-sizes="[15, 50, 100, 200]"
      :current-page="pageSize"
      @current-change="pageChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      style="margin-top: 30px"
    >
    </el-pagination>
    <div class="footer">
      <el-button size="small" class="commonBtn" @click="cancelBtn">取消</el-button>
      <el-button size="small" type="primary" @click="subBtn" class="commonBtn1">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      personnelList: [],
      pageSize: 1,
      name: '',
      totalSize: 0,
      currenteSize: 15,
      selectList: []
    }
  },
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  methods: {
    addIndex(index) {
      return index + 1 + (this.pageSize - 1) * this.currenteSize
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    pageChange(e) {
      this.pageSize = e
      this.getData()
    },
    handleSizeChange(e) {
      this.currenteSize = e
      this.getData()
    },
    handleSelect(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.personTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection) {
      this.$refs.personTable.clearSelection()
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    handleSelectionChange(e) {
      this.selectList = e
    },
    searchBtn() {
      this.getData()
    },
    cancelBtn() {
      this.$emit('close', '')
    },
    subBtn() {
      if (this.selectList.length == 0) {
        this.$message.error('请选择人员')
      } else {
        this.$emit('close', this.selectList[0])
      }
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/User/listEnterpriseUser',
        data: {
          userName: this.name,
          page: this.pageSize,
          size: this.currenteSize
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.personnelList = res.data.records
            this.totalSize = res.data.total
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped lang="less">
.inventory_table {
  margin-top: 20px;
}
.commonBtn1 {
  margin-left: 10px;
}
// .header {
//   display: flex;
//   justify-content: space-between;
// }
.footer {
  .commonBtn,
  .commonBtn1 {
    width: 130px;
  }
  text-align: center;
  margin-top: 40px;
}
</style>
